<template>
  <section id="get-started-today" class="relative overflow-hidden bg-blue-600 py-32">
    <img
      class="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
      :src="backgroundImage"
      alt=""
      width="2347"
      height="1244"
    />
    <Container class="relative">
      <div class="mx-auto max-w-lg text-center">
        <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl">Get started today</h2>
        <p class="mt-4 text-lg tracking-tight text-white">
          It's time to take control of your books. Buy our software so you can feel like you're doing something
          productive.
        </p>
        <Button to="/register" severity="secondary" class="mt-10 bg-white text-blue-600 hover:bg-blue-50">
          Get 6 months free
        </Button>
      </div>
    </Container>
  </section>
</template>

<script setup>
  import Container from './Container.vue'
  //   import { Button } from 'primevue/button'
  import backgroundImage from '@/assets/images/background-call-to-action.jpg'
</script>
